<template>
  <div>
    <!-- 二级路由页面出口 -->
    <div class="data">
      <el-col :span="6" :log="6" :xs="12">
        <div class="num">
          <i class="el-icon-reading"></i>
          <div class="left">
            <p>试卷总数</p>
            <span>136</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :log="6" :xs="12">
        <div class="num">
          <i class="el-icon-document-remove"></i>
          <div class="left">
            <p>题目总数</p>
            <span>{{ timuCount }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :log="6" :xs="12">
        <div class="num">
          <i class="el-icon-document-copy"></i>
          <div class="left">
            <p>答卷总数</p>
            <span>5460</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6" :log="6" :xs="12">
        <div class="num">
          <i class="el-icon-edit-outline"></i>
          <div class="left">
            <p>答题总数</p>
            <span>26733</span>
          </div>
        </div>
      </el-col>
    </div>

    <!-- echarts图表 -->
    <div id="user"></div>
    <div id="order"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { showQuestionList } from "@/apis/zhuomeng/Index.js";
export default {
  data() {
    return {
      timuCount: "",
    };
  },
  mounted() {
    // 获取题目总数请求
    showQuestionList().then((ok) => {
      console.log(ok.data.data);
      this.timuCount = ok.data.data;
    });
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById("user"));
    var myChart2 = echarts.init(document.getElementById("order"));
    // 指定图表的配置项和数据
    var option1 = {
      title: {
        text: "用户活跃度",
        // textAlign: "auto",
        // textVerticalAlign: "middle",
        x: "center",
        y: "20px",
      },
      tooltip: {},
      xAxis: {
        data: [
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
          21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32,
        ],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: [0, 0, 0, 6040, 5100, 1001, 677, 899, 478, 345],
          markPoint: {
            data: [
              {
                type: "min",
              },
              {
                type: "max",
              },
            ],
          },
        },
      ],
    };
    var option2 = {
      title: {
        text: "题目月数量",
        // textAlign: "auto",
        // textVerticalAlign: "middle",
        x: "center",
        y: "20px",
      },
      tooltip: {},
      xAxis: {
        data: [
          1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
          21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32,
        ],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: [0, 0, 0, 6040, 5100, 1001, 677, 899, 478, 345],
          markPoint: {
            data: [
              {
                type: "min",
              },
              {
                type: "max",
              },
            ],
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);
  },
};
</script>

<style scoped>
.data {
  height: 100px;
  /* background: pink; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.data .num {
  width: 90%;
  height: 100px;
  background: white;
  display: flex;
  padding-left: 20px;
  text-align: center;
}
/* 数据内容 */
.data .num i {
  font-size: 52px;
  line-height: 100px;
}
.data .num .left {
  line-height: 35px;
  margin: auto;
}
.data .num .left p {
  color: #857f7f;
  font-weight: 700;
}
.data .num .left span {
  font-weight: 700;
  font-size: 20px;
}
.el-icon-reading {
  color: rgb(10, 90, 10);
}
.el-icon-document-remove {
  color: blue;
}
.el-icon-document-copy {
  color: rgb(136, 198, 136);
}
.el-icon-edit-outline {
  color: orangered;
}
/* echarts */
#user,
#order {
  width: 100%;
  height: 500px;
  background: white;
  margin-top: 30px;
}
</style>
